<template>
<view class="">
	<SearchBar :fixed="true" :back="true" @search="onSearch"></SearchBar>
	<u-waterfall v-model="flowList" ref="uWaterfall">
		<template v-slot:left="{leftList}">
			<view class="demo-warter"  v-for="(item, index) in leftList" @tap="toDetail(item.id)" :key="item.id">
				<!-- 警告：微信小程序不支持嵌入lazyload组件，请自行如下使用image标签 -->
				<!-- #ifndef MP-WEIXIN -->
					<u-lazy-load threshold="-450" border-radius="10" :image="item.photos[0].url" :index="index"></u-lazy-load>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<view class="demo-img-wrap">
					<image class="demo-image" :src="item.photos[0].url" mode="heightFix"></image>
				</view>
				<!-- #endif -->
				<view class="demo-title text-df padding-left-xs">
					{{item.name}}
				</view>
				<view class="demo-tag flex-wrap">
					<view class="cu-tag round line-red margin-xs" v-for="(item,index) in item.type.split(';')" :key="index">{{item}}</view>
				</view>
				<view class="demo-shop padding-left-xs">
					{{item.address}}
				</view>
			</view>
		</template>
		<template v-slot:right="{rightList}">
			<view class="demo-warter" v-for="(item, index) in rightList" @click.stop="toDetail(item.id)" :key="item.id">
				<!-- #ifndef MP-WEIXIN -->
					<u-lazy-load threshold="-450" border-radius="10" :image="item.photos[0]?item.photos[0].url:''" :index="index"></u-lazy-load>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<view class="demo-img-wrap">
					<image class="demo-image" :src="item.photos[0].url" mode="heightFix"></image>
				</view>
				<!-- #endif -->
				<view class="demo-title text-df padding-left-xs">
					{{item.name}}
				</view>
				<view class="demo-tag flex flex-wrap">
					<view class="cu-tag round line-red margin-xs" v-for="(item,index) in item.type.split(';')" :key="index">{{item}}</view>
				</view>
				<view class="demo-shop padding-left-xs">
					{{item.address}}
				</view>
			</view>
		</template>
	  </u-waterfall>
	</view>
</view>
</template>

<script>
import SearchBar from './components/search.vue';
export default {
	data() {
		return {
			flowList:[],//结果列表
			page:1,
			keywords:''
		}
	},
	components:{
		SearchBar
	},
	onReachBottom(){
		console.log("底部")
		this.keywordSearch();
	},
	methods: {
		onSearch(e){
			this.flowList = [];
			this.page = 1;
			this.keywords = e;
			this.keywordSearch();
		},
		keywordSearch(){
			this.$api.keywordSearch({
				keywords:this.keywords,
				page:this.page
			}).then(res=>{
				console.log("res",res);
				if(res.data.status == 1){
					this.page++;
					this.flowList = [...this.flowList,...res.data.pois];
				}
			})
		},
		toDetail(id){
			console.log("id",id);
			uni.navigateTo({
				url:'./detail?id='+id,
			})
		}
	}
}
</script>

<style lang="scss" scoped>
page{
background-color: #fff;
}
.t-icon{
width: 60rpx;
height: 60rpx;
background-repeat: no-repeat;
}
.u-demo {
//height: 200vh;
height: calc(100% - 44px);
height: calc(100% - 44px - constant(safe-area-inset-top));
height: calc(100% - 44px - env(safe-area-inset-top));
}

.wrap {
padding: 24rpx;
}

.search-wrap {
margin: 0 20rpx;
flex: 1;
// filter:drop-shadow(10rpx 10rpx 4rpx rgba(0,0,0,.05))
box-shadow: 0 0 10px 2px rgba(0,0,0,.1);
background-color: #fff;
border-radius: 56rpx;
}
.slot-wrap {
display: flex;
align-items: center;
flex: 1;
}
.demo-warter {
	border-radius: 8px;
	margin: 5px;
	padding: 8px;
	position: relative;
	box-shadow: 0 2rpx 20rpx 4rpx rgba(0,0,0,.1);
}

.demo-image {
	width: 100%;
	border-radius: 4px;
}

.demo-title {
	font-size: 30rpx;
	margin-top: 5px;
	color: $u-main-color;
}

.demo-tag {
	display: flex;
	margin-top: 5px;
}

.demo-tag-owner {
	background-color: $u-type-error;
	color: #FFFFFF;
	display: flex;
	align-items: center;
	padding: 4rpx 14rpx;
	border-radius: 50rpx;
	font-size: 20rpx;
	line-height: 1;
}

.demo-tag-text {
	border: 1px solid $u-type-primary;
	color: $u-type-primary;
	margin-left: 10px;
	border-radius: 50rpx;
	line-height: 1;
	padding: 4rpx 14rpx;
	display: flex;
	align-items: center;
	border-radius: 50rpx;
	font-size: 20rpx;
}

.demo-price {
	font-size: 30rpx;
	color: $u-type-error;
	margin-top: 5px;
}

.demo-shop {
	font-size: 22rpx;
	color: $u-tips-color;
	margin-top: 5px;
}
</style>

